<template>
  <view v-show="visible" class="party-info-main" @click.stop="() => {}">
    <view class="covert-main">
      <view
        class="party-info-close"
        :class="styleType"
        @click="hideCover"
      ></view>
      <view
        class="party-info-content style1"
        :class="styleType === 'style1' ? 'on' : ''"
        :style="{ backgroundImage: 'url(' + imgUrl + ')' }"
      >
        <view class="party-info-body" v-if="dataType !== 3">
          <view
            class="style1-main"
            v-for="(item, index) in list"
            :key="index"
            :style="{ backgroundImage: 'url(' + item.img + ')' }"
            @click="selectItem(item, index)"
            v-show="index < 9"
          >
            <view
              class="style1-radio"
              :class="item.checked ? 'on' : ''"
              :id="item.recommendId"
              :value="item.recommendId"
            ></view>
          </view>
          <view class="button">
            <view class="all btn" @click="selectAll">全选</view>
            <view class="confim btn" @click="confim">确定</view>
          </view>
        </view>
        <view
          class="party-info-body type3"
          v-else
          @click="externalLinksClick"
        ></view>
      </view>
      <view
        class="party-info-content style2"
        :class="styleType === 'style2' ? 'on' : ''"
        :style="{ backgroundImage: 'url(' + imgUrl + ')' }"
      >
        <view class="party-info-body" v-if="dataType !== 3">
          <view class="style2-main" @click="selectMore(3)">
            <view class="style2-title">为您推荐3个优质店铺</view>
            <view
              class="style2-radio"
              :class="selectNum === 3 ? 'on' : ''"
            ></view>
          </view>
          <view class="style2-main" @click="selectMore(5)">
            <view class="style2-title">为您推荐5个优质店铺</view>
            <view
              class="style2-radio"
              :class="selectNum === 5 ? 'on' : ''"
            ></view>
          </view>
          <view class="style2-main border" @click="selectMore(8)">
            <view class="style2-title">为您推荐8个优质店铺</view>
            <view
              class="style2-radio"
              :class="selectNum === 8 ? 'on' : ''"
            ></view>
          </view>
          <view class="button">
            <view class="all btn" @click="selectAll">全选</view>
            <view class="confim btn" @click="confim">确定</view>
          </view>
        </view>
        <view
          class="party-info-body type3"
          v-else
          @click="externalLinksClick"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      title: "Hello",
      radioItems: [],
      visible: false,
      list: [],
      styleType: "",
      imgUrl: "",
      selectId: [],
      selectNum: 0,
      orderId: null,
      dataType: null,
      pushAppId: null,
      pushLink: null,
    };
  },
  onLoad() {},
  methods: {
    showCover(vl = {}, orderId) {
      const { list = [], imgUrl, styleType } = vl;
      this.list = list;
      this.imgUrl = imgUrl;
      this.styleType = "style" + styleType;
      this.visible = true;
      this.orderId = orderId;
      this.dataType = vl.dataType;
      this.pushAppId = vl.pushAppId;
      this.pushLink = vl.pushLink;
    },
    hideCover() {
      this.visible = false;
      this.$emit("partCoverCall");
    },
    selectItem(item, index) {
      const selectId = this.selectId || [],
        _index = selectId.indexOf(item.recommendId);
      const list = this.list;
      let now = list[index];
      if (_index > -1) {
        selectId.splice(_index, 1);
        now.checked = false;
      } else {
        selectId.push(item.recommendId);
        now.checked = true;
      }
      this.selectId = selectId;
      list[index] = now;
      this.list = list;
    },
    selectMore(num) {
      this.selectNum = num;
      const _num = num > this.list.length ? this.list.length : num;
      const list = this.list,
        selectId = [];
      let i = 0;
      while (i < _num) {
        selectId.push(list[i].recommendId);
        i++;
      }
      this.selectId = selectId;
    },
    selectAll() {
      const list = [];
      this.list.forEach((item) => {
        list.push(item.recommendId);
      });
      this.selectId = list;
      this.confim();
    },
    confim() {
      if (this.selectId.length > 0) {
        this.$request(
          "order/mall/liteUserOrders/addTransferRecord",
          {
            orderId: this.orderId,
            select: this.selectId,
            dataType: this.dataType,
          },
          "post"
        ).then((rs) => {
          this.hideCover();
        });
      } else {
        uni.showToast({ title: "请至少选择一个" });
      }
    },
    externalLinksClick() {
      uni.navigateToMiniProgram({
        appId: this.pushAppId,
        path: this.pushLink,
        success(res) {
          this.hideCover();
          // console.log("打开成功",res);
        },
      });
    },
  },
};
</script>

<style lang="scss">
.party-info-main {
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  .covert-main {
    width: 100%;
    height: 100%;
    position: relative;
    .party-info-close {
      width: 72rpx;
      height: 72rpx;
      background-image: url("https://jjzus.oss-cn-hangzhou.aliyuncs.com/e7b9886542eb4316904742e0309b3f8c.png");
      background-size: 100%;
      background-repeat: no-repeat;
      position: absolute;
      left: 50%;
      margin-left: -36rpx;
      &.style1 {
        top: 50%;
        margin-top: 290rpx;
      }
      &.style2 {
        top: 50%;
        margin-top: 260rpx;
      }
    }
    .party-info-content {
      display: none;
      width: 637rpx;
      height: 698rpx;
      background-size: 100%;
      background-repeat: no-repeat;
      position: absolute;
      left: 50%;
      margin-left: -318rpx;
      &.type3 {
        width: 100%;
        height: 100%;
        left: 0;
        margin-left: 0;
      }
      &.on {
        display: block;
      }
      &.style1 {
        top: 50%;
        margin-top: -430rpx;
        .party-info-body {
          margin: 225rpx 155rpx 0 155rpx;
          width: 327rpx;
          height: 435rpx;
          overflow: hidden;
          position: relative;
          .style1-main {
            margin: 10rpx 15rpx;
            width: 75rpx;
            height: 75rpx;
            background-size: 100%;
            background-repeat: no-repeat;
            position: relative;
            float: left;
            .style1-radio {
              width: 36rpx;
              height: 36rpx;
              background-color: #fff;
              border-radius: 50%;
              position: absolute;
              bottom: -20rpx;
              left: 50%;
              margin-left: -18rpx;
              &.on {
                background-image: url("https://jjzus.oss-cn-hangzhou.aliyuncs.com/239adcef6199454bbce9c50f2a3973b3.png");
                background-repeat: no-repeat;
                background-size: 100%;
              }
            }
          }
          .button {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 20rpx;
            .btn {
              width: 150rpx;
              height: 66rpx;
              line-height: 66rpx;
              border: 1px solid #b7370c;
              border-radius: 28rpx;
              text-align: center;
              &.all {
                float: left;
                color: #b7370c;
                background-color: #fff;
              }
              &.confim {
                float: right;
                color: #fff;
                background-color: #b7370c;
              }
            }
          }
        }
      }
      &.style2 {
        top: 50%;
        margin-top: -400rpx;
        .party-info-body {
          margin: 275rpx 125rpx 0 145rpx;
          width: 367rpx;
          height: 375rpx;
          .style2-main {
            height: 70rpx;
            line-height: 70rpx;
            border-bottom: 1px dashed #b7370c;
            overflow: hidden;
            &.border {
              border-bottom: none;
            }
            .style2-title {
              font-size: 14px;
              color: #b7370c;
              float: left;
            }
            .style2-radio {
              margin: 20rpx 30rpx;
              width: 30rpx;
              height: 30rpx;
              background-color: #fff;
              border-radius: 50%;
              float: right;
              &.on {
                background-image: url("https://jjzus.oss-cn-hangzhou.aliyuncs.com/239adcef6199454bbce9c50f2a3973b3.png");
                background-repeat: no-repeat;
                background-size: 100%;
              }
            }
          }
          .button {
            margin-top: 60rpx;
            .btn {
              width: 160rpx;
              height: 66rpx;
              line-height: 66rpx;
              background: linear-gradient(
                180deg,
                rgba(255, 255, 212, 1) 0%,
                rgba(240, 215, 143, 1) 50%,
                rgba(219, 182, 73, 1) 100%
              );
              border-radius: 28rpx;
              text-align: center;
              color: #b7370c;
              &.all {
                float: left;
              }
              &.confim {
                float: right;
              }
            }
          }
        }
      }
    }
  }
}
</style>
